<template>
  <div class="evaluation-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>教学评价</span>
          <el-radio-group v-model="activeTab" @change="handleTabChange">
            <el-radio-button label="待评价">待评价课程</el-radio-button>
            <el-radio-button label="已评价">已评价课程</el-radio-button>
          </el-radio-group>
        </div>
      </template>
      
      <!-- 待评价课程列表 -->
      <div v-if="activeTab === '待评价'">
        <div v-if="pendingCourses.length === 0" class="empty-tip">
          <el-empty description="暂无待评价课程" />
        </div>
        <el-table v-else :data="pendingCourses" style="width: 100%">
          <el-table-column prop="courseCode" label="课程代码" width="120" />
          <el-table-column prop="courseName" label="课程名称" min-width="180" />
          <el-table-column prop="teacher" label="任课教师" width="120" />
          <el-table-column prop="semester" label="学期" width="180" />
          <el-table-column prop="endDate" label="结课日期" width="120" />
          <el-table-column prop="deadline" label="评价截止日期" width="120" />
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <el-button 
                link
                type="primary" 
                @click="startEvaluation(scope.row)"
              >
                评价
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <!-- 已评价课程列表 -->
      <div v-else>
        <div v-if="completedCourses.length === 0" class="empty-tip">
          <el-empty description="暂无已评价课程" />
        </div>
        <el-table v-else :data="completedCourses" style="width: 100%">
          <el-table-column prop="courseCode" label="课程代码" width="120" />
          <el-table-column prop="courseName" label="课程名称" min-width="180" />
          <el-table-column prop="teacher" label="任课教师" width="120" />
          <el-table-column prop="semester" label="学期" width="180" />
          <el-table-column prop="evaluationDate" label="评价日期" width="120" />
          <el-table-column prop="overallRating" label="综合评分" width="120">
            <template #default="scope">
              <el-rate
                v-model="scope.row.overallRating"
                disabled
                text-color="#ff9900"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <el-button 
                link
                type="primary" 
                @click="viewEvaluation(scope.row)"
              >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    
    <!-- 评价对话框 -->
    <el-dialog
      v-model="showEvaluationDialog"
      :title="`课程评价 - ${currentCourse.courseName}`"
      width="700px"
    >
      <div class="course-info">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="课程名称">{{ currentCourse.courseName }}</el-descriptions-item>
          <el-descriptions-item label="课程代码">{{ currentCourse.courseCode }}</el-descriptions-item>
          <el-descriptions-item label="任课教师">{{ currentCourse.teacher }}</el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div class="evaluation-form">
        <el-form ref="evaluationFormRef" :model="evaluationForm" :rules="evaluationRules" label-width="120px">
          <div class="evaluation-section">
            <h3>教学内容评价</h3>
            <el-form-item label="教学内容" prop="contentRating">
              <el-rate v-model="evaluationForm.contentRating" show-text :texts="ratingTexts" />
            </el-form-item>
            <el-form-item label="课程设计" prop="designRating">
              <el-rate v-model="evaluationForm.designRating" show-text :texts="ratingTexts" />
            </el-form-item>
            <el-form-item label="教材使用" prop="materialRating">
              <el-rate v-model="evaluationForm.materialRating" show-text :texts="ratingTexts" />
            </el-form-item>
          </div>
          
          <div class="evaluation-section">
            <h3>教学方法评价</h3>
            <el-form-item label="教学方法" prop="methodRating">
              <el-rate v-model="evaluationForm.methodRating" show-text :texts="ratingTexts" />
            </el-form-item>
            <el-form-item label="教学互动" prop="interactionRating">
              <el-rate v-model="evaluationForm.interactionRating" show-text :texts="ratingTexts" />
            </el-form-item>
            <el-form-item label="答疑解惑" prop="responseRating">
              <el-rate v-model="evaluationForm.responseRating" show-text :texts="ratingTexts" />
            </el-form-item>
          </div>
          
          <div class="evaluation-section">
            <h3>教学效果评价</h3>
            <el-form-item label="知识掌握" prop="knowledgeRating">
              <el-rate v-model="evaluationForm.knowledgeRating" show-text :texts="ratingTexts" />
            </el-form-item>
            <el-form-item label="能力提升" prop="skillRating">
              <el-rate v-model="evaluationForm.skillRating" show-text :texts="ratingTexts" />
            </el-form-item>
            <el-form-item label="综合评价" prop="overallRating">
              <el-rate v-model="evaluationForm.overallRating" show-text :texts="ratingTexts" />
            </el-form-item>
          </div>
          
          <div class="evaluation-section">
            <h3>意见与建议</h3>
            <el-form-item label="课程优点" prop="strengths">
              <el-input 
                v-model="evaluationForm.strengths" 
                type="textarea" 
                :rows="3"
                placeholder="请输入您认为课程的优点或亮点"
              />
            </el-form-item>
            <el-form-item label="改进建议" prop="suggestions">
              <el-input 
                v-model="evaluationForm.suggestions" 
                type="textarea" 
                :rows="3"
                placeholder="请输入您对课程的改进建议"
              />
            </el-form-item>
          </div>
          
          <div class="anonymous-tip">
            <el-alert
              title="教学评价采用匿名方式，您的评价将不会被教师知晓个人信息，请放心填写。"
              type="info"
              :closable="false"
              show-icon
            />
          </div>
        </el-form>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showEvaluationDialog = false">取消</el-button>
          <el-button type="primary" @click="submitEvaluation">提交评价</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 查看评价对话框 -->
    <el-dialog
      v-model="showViewDialog"
      :title="`评价详情 - ${currentCourse.courseName}`"
      width="700px"
    >
      <div class="view-evaluation">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="课程名称">{{ currentCourse.courseName }}</el-descriptions-item>
          <el-descriptions-item label="课程代码">{{ currentCourse.courseCode }}</el-descriptions-item>
          <el-descriptions-item label="任课教师">{{ currentCourse.teacher }}</el-descriptions-item>
          <el-descriptions-item label="评价日期">{{ currentCourse.evaluationDate }}</el-descriptions-item>
          <el-descriptions-item label="综合评分" :span="2">
            <el-rate v-model="currentCourse.overallRating" disabled />
          </el-descriptions-item>
        </el-descriptions>
        
        <div class="rating-details">
          <h3>评分详情</h3>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item, index) in ratingItems" :key="index">
              <div class="rating-item">
                <span class="rating-label">{{ item.label }}</span>
                <el-rate v-model="currentCourse.ratings[item.key]" disabled />
              </div>
            </el-col>
          </el-row>
        </div>
        
        <div class="feedback-section">
          <h3>意见反馈</h3>
          <div class="feedback-item">
            <div class="feedback-label">课程优点</div>
            <div class="feedback-content">{{ currentCourse.feedback.strengths }}</div>
          </div>
          <div class="feedback-item">
            <div class="feedback-label">改进建议</div>
            <div class="feedback-content">{{ currentCourse.feedback.suggestions }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import studentApi from '@/api/modules/student'

// 当前活动标签
const activeTab = ref('待评价')

// 评价对话框控制
const showEvaluationDialog = ref(false)
const showViewDialog = ref(false)
const currentCourse = ref({})
const evaluationFormRef = ref(null)

// 评分文本
const ratingTexts = ['很差', '较差', '一般', '良好', '优秀']

// 评分项目
const ratingItems = [
  { label: '教学内容', key: 'contentRating' },
  { label: '课程设计', key: 'designRating' },
  { label: '教材使用', key: 'materialRating' },
  { label: '教学方法', key: 'methodRating' },
  { label: '教学互动', key: 'interactionRating' },
  { label: '答疑解惑', key: 'responseRating' },
  { label: '知识掌握', key: 'knowledgeRating' },
  { label: '能力提升', key: 'skillRating' }
]

// 待评价课程数据
const pendingCourses = ref([])
const completedCourses = ref([])

const fetchEvaluationList = async () => {
  try {
    const res = await studentApi.getEvaluationList()
    if (res.code === 200 && res.data) {
      pendingCourses.value = res.data.pendingCourses || []
      completedCourses.value = res.data.completedCourses || []
    }
  } catch (error) {
    console.error('获取评教列表失败:', error)
    ElMessage.error('获取评教列表失败')
  }
}

onMounted(() => {
  fetchEvaluationList()
})

// 评价表单数据
const evaluationForm = reactive({
  contentRating: 0,
  designRating: 0,
  materialRating: 0,
  methodRating: 0,
  interactionRating: 0,
  responseRating: 0,
  knowledgeRating: 0,
  skillRating: 0,
  overallRating: 0,
  strengths: '',
  suggestions: ''
})

// 表单验证规则
const evaluationRules = {
  contentRating: [{ required: true, message: '请评价教学内容', trigger: 'change' }],
  designRating: [{ required: true, message: '请评价课程设计', trigger: 'change' }],
  materialRating: [{ required: true, message: '请评价教材使用', trigger: 'change' }],
  methodRating: [{ required: true, message: '请评价教学方法', trigger: 'change' }],
  interactionRating: [{ required: true, message: '请评价教学互动', trigger: 'change' }],
  responseRating: [{ required: true, message: '请评价答疑解惑', trigger: 'change' }],
  knowledgeRating: [{ required: true, message: '请评价知识掌握', trigger: 'change' }],
  skillRating: [{ required: true, message: '请评价能力提升', trigger: 'change' }],
  overallRating: [{ required: true, message: '请进行综合评价', trigger: 'change' }],
  strengths: [{ required: true, message: '请填写课程优点', trigger: 'blur' }],
  suggestions: [{ required: true, message: '请填写改进建议', trigger: 'blur' }]
}

// 开始评价
const startEvaluation = (course) => {
  currentCourse.value = course
  showEvaluationDialog.value = true
  
  // 重置表单
  Object.keys(evaluationForm).forEach(key => {
    if (typeof evaluationForm[key] === 'number') {
      evaluationForm[key] = 0
    } else {
      evaluationForm[key] = ''
    }
  })
}

// 查看评价
const viewEvaluation = (course) => {
  currentCourse.value = course
  showViewDialog.value = true
}

// 提交评价
const submitEvaluation = () => {
  evaluationFormRef.value.validate(async (valid) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认提交该课程的教学评价？提交后将无法修改。',
        '提交确认',
        {
          confirmButtonText: '确认提交',
          cancelButtonText: '取消',
          type: 'info',
        }
      )
        .then(async () => {
          try {
            // 提交评教数据
            const res = await studentApi.submitEvaluation(currentCourse.value.id, {
              contentRating: evaluationForm.contentRating,
              designRating: evaluationForm.designRating,
              materialRating: evaluationForm.materialRating,
              methodRating: evaluationForm.methodRating,
              interactionRating: evaluationForm.interactionRating,
              responseRating: evaluationForm.responseRating,
              knowledgeRating: evaluationForm.knowledgeRating,
              skillRating: evaluationForm.skillRating,
              overallRating: evaluationForm.overallRating,
              strengths: evaluationForm.strengths,
              suggestions: evaluationForm.suggestions
            })
            
            if (res.code === 200) {
              // 模拟提交
              const now = new Date()
              const dateString = now.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
              }).replace(/\//g, '-')
              
              // 添加到已评价列表
              completedCourses.value.unshift({
                id: currentCourse.value.id,
                courseCode: currentCourse.value.courseCode,
                courseName: currentCourse.value.courseName,
                teacher: currentCourse.value.teacher,
                semester: currentCourse.value.semester,
                evaluationDate: dateString,
                overallRating: evaluationForm.overallRating,
                ratings: {
                  contentRating: evaluationForm.contentRating,
                  designRating: evaluationForm.designRating,
                  materialRating: evaluationForm.materialRating,
                  methodRating: evaluationForm.methodRating,
                  interactionRating: evaluationForm.interactionRating,
                  responseRating: evaluationForm.responseRating,
                  knowledgeRating: evaluationForm.knowledgeRating,
                  skillRating: evaluationForm.skillRating
                },
                feedback: {
                  strengths: evaluationForm.strengths,
                  suggestions: evaluationForm.suggestions
                }
              })
              
              // 从待评价列表中移除
              const index = pendingCourses.value.findIndex(item => item.id === currentCourse.value.id)
              if (index !== -1) {
                pendingCourses.value.splice(index, 1)
              }
              
              ElMessage({
                type: 'success',
                message: '教学评价提交成功',
              })
              
              showEvaluationDialog.value = false
            }
          } catch (error) {
            console.error('提交评教失败:', error)
            ElMessage.error('提交评教失败')
          }
        })
        .catch(() => {
          // 用户取消提交
        })
    } else {
      return false
    }
  })
}

// 处理标签切换
const handleTabChange = (val) => {
  console.log('切换到标签:', val)
}
</script>

<style scoped>
.evaluation-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.empty-tip {
  margin: 30px 0;
  text-align: center;
}

.course-info {
  margin-bottom: 20px;
}

.evaluation-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.evaluation-section h3 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
}

.anonymous-tip {
  margin: 20px 0;
}

.rating-details {
  margin-top: 20px;
}

.rating-details h3 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
}

.rating-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.rating-label {
  margin-bottom: 5px;
  color: #606266;
}

.feedback-section {
  margin-top: 20px;
}

.feedback-section h3 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
}

.feedback-item {
  margin-bottom: 15px;
}

.feedback-label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #606266;
}

.feedback-content {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  color: #606266;
  line-height: 1.5;
}
</style> 